<section>
  <h3>多层树状拖拽</h3>
  <div class="row">
    <div class="col-sm-3">
      <div class="card">
        <div class="card-header">备选区</div>
        <div class="card-block">
          <ul class="list-group">
            <li
              *ngFor="let item of list1; let i = index"
              dDraggable
              [dragScope]="'drop-area'"
              [dragData]="{ item: item, parentList: list1, index: i }"
              class="list-group-item"
            >
              <div class="name">{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div
        class="card card-outline-primary mb-3"
        dDroppable
        [dropScope]="'drop-area'"
        [allowDropOnItem]="true"
        [nestingTargetRect]="{ height: 30 }"
        [dragOverItemClass]="'dragover-item'"
        (dropEvent)="onDrop($event, list2)"
      >
        <div class="card-header">树状排序区</div>
        <div class="card-block">
          <ul class="list-group d-drop-el" dSortable>
            <li
              *ngFor="let item of list2; let i = index"
              dDraggable
              [dragScope]="'drop-area'"
              [dragHandleClass]="'drag-handle'"
              [dragData]="{ item: item, parentList: list2, index: i }"
            >
              <div class="name">
                {{ item.name }}
              </div>
              <ng-template
                *ngIf="item.children && item.children.length > 0"
                [ngTemplateOutlet]="childlist"
                [ngTemplateOutletContext]="{ item: item }"
              ></ng-template>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<ng-template #childlist let-parent="item">
  <ul
    class="list-group list-group-child"
    dSortable
    dDroppable
    [dropScope]="'drop-area'"
    [allowDropOnItem]="true"
    [nestingTargetRect]="{ height: 30 }"
    [dragOverItemClass]="'dragover-item'"
    (dropEvent)="onDrop($event, parent.children)"
  >
    <li
      *ngFor="let item of parent.children; let j = index"
      [dragHandleClass]="'drag-handle'"
      dDraggable
      [dragScope]="'drop-area'"
      [dragData]="{ item: item, parentList: parent.children, index: j }"
    >
      <div class="name">
        {{ item.name }}
      </div>
      <ng-template
        *ngIf="item.children && item.children.length > 0"
        [ngTemplateOutlet]="childlist"
        [ngTemplateOutletContext]="{ item: item }"
      ></ng-template>
    </li>
  </ul>
</ng-template>
